<template>
  <div class="course-introduce-page">
    <nav-bar title="课程介绍" theme="blue">
      <template #custom>
        <img src="@/assets/images/learnTest/myStudy_collect_defoc.png" @click="collectFoc" v-if="flag" />
        <img src="@/assets/images/learnTest/myStudy_collect_foc.png" @click="collectDefoc" v-if="!flag" />
      </template>
    </nav-bar>
    <div class="course-introduce-page-banner">
      <van-image width="100%" height="100%" :src="$config.ImageURl + courseDetail.instruction.banner || ''" />
    </div>
    <div class="page-main" style="margin-top: -44px">
      <div class="introduction">
        <div class="introduction--card">
          <van-tabs>
            <van-tab title="简介" class="introduction--card--introduce">
              <h2 class="ellipsis2 introduction--card--title">
                {{ courseDetail.text }}
              </h2>
              <van-cell-group>
                <van-cell :title="courseDetail.typeName" :value="courseDetail.time" />
              </van-cell-group>
              <h3 class="ellipsis2 introduction--card--title">课程介绍</h3>
              <div
                class="introduction--card--content ql-editor"
                v-if="courseDetail.instruction.subjectDescribe"
                v-html="courseDetail.instruction.subjectDescribe"
              ></div>
              <van-empty
                v-else
                :image="require('@/assets/images/basic/pic_no_content.png')"
                description="暂无内容~"
                style="height: 150px"
              />
              <h3 class="ellipsis2 introduction--card--title">课程大纲</h3>
              <div
                class="introduction--card--content"
                v-if="courseDetail.instruction.subjectName"
                v-html="courseDetail.instruction.subjectName"
              ></div>
              <van-empty
                v-else
                :image="require('@/assets/images/basic/pic_no_content.png')"
                description="暂无内容~"
                style="height: 150px"
              />
            </van-tab>
            <van-tab title="目录" class="introduction--card--catalog">
              <van-collapse v-model="activeNames">
                <van-collapse-item
                  v-for="(item, key) in courseDetail.chapter"
                  :key="key"
                  :title="item.chapterCatalogueName"
                  :name="key"
                >
                  <van-cell-group v-for="(o, k) in item.content" :key="k">
                    <van-cell :title="o.chapterName" @click="clickCell(o, item)">
                      <template #right-icon>
                        <van-icon
                          :name="o.chapterType === '1' ? 'column' : 'live'"
                          color="#37C2BB"
                          class="search-icon"
                          size="24px"
                        />
                        <img
                          src="@/assets/images/learnTest/catalogue_complete.png"
                          v-if="flagNumber === '2' && o.myContentId"
                          style="width: 21px; height: 21px"
                        />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-collapse-item>
              </van-collapse>
            </van-tab>
            <van-tab title="课程反馈" class="introduction--card--feedback" v-if="flagNumber === '2'">
              <div style="padding: 15px">
                <van-field
                  v-model="message"
                  rows="14"
                  autosize
                  type="textarea"
                  maxlength="500"
                  placeholder="请填写课程反馈"
                  show-word-limit
                />
                <van-row :gutter="23" style="margin-top: 20px">
                  <van-col span="12">
                    <van-button block native-type="button" @click="onClear">清空</van-button>
                  </van-col>
                  <van-col span="12">
                    <van-button
                      block
                      type="info"
                      native-type="submit"
                      :loading="button.loading"
                      :disabled="button.disabled"
                      @click="onSubmit"
                    >
                      {{ button.text }}
                    </van-button>
                  </van-col>
                </van-row>
              </div>
            </van-tab>
          </van-tabs>
        </div>
        <gb-video :url="videoUrl" :show.sync="videoShow"></gb-video>
      </div>
    </div>
  </div>
</template>
<script>
import learnTest from '@/api/learnTest'
export default {
  data() {
    return {
      courseCode: 0,
      courseDetail: {}, // 课程列表
      activeNames: [0, 1],
      videoShow: false,
      videoUrl: '',
      button: {
        disabled: false,
        loading: false,
        text: '提交'
      },
      message: '',
      flagNumber: '',
      flag: true
    }
  },
  computed: {},
  created() {
    this.getCourseDetail()
    this.flagNumber = this.$route.query.flagNumber
  },
  mounted() {},
  methods: {
    // 点击收藏
    collectFoc() {
      const data = {
        subjectCode: this.$route.query.subjectCode
      }
      learnTest.Course.collectsave(data).then(res => {
        if (res.data.status === 0) {
          this.flag = false
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 点击取消收藏
    collectDefoc() {
      const data = {
        code: this.$route.query.code
      }
      learnTest.Course.collectcancel(data).then(res => {
        if (res.data.status === 0) {
          this.flag = true
          this.$toast.success('取消收藏成功')
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 点击保存课程
    courseSave(chapterCode, chapterCatalogueCode) {
      const data = {
        subjectCode: this.$route.query.subjectCode,
        chapterCode: chapterCode,
        chapterCatalogueCode: chapterCatalogueCode
      }
      learnTest.Course.courseSave(data).then(res => {
        if (res.data.status === 0) {
        } else {
        }
      })
    },
    // 点击保存章节
    contentsave(chapterCode, chapterCatalogueCode, myCourseCode) {
      const data = {
        chapterCode: chapterCode,
        chapterCatalogueCode: chapterCatalogueCode,
        myCourseCode: myCourseCode
      }
      learnTest.Course.contentsave(data).then(res => {
        if (res.data.status === 0) {
        } else {
        }
      })
    },
    // 获取课程详情
    getCourseDetail() {
      const data = {
        subjectCode: this.$route.query.subjectCode
      }
      learnTest.Course.courseDetail(data).then(res => {
        if (res.data.status === 0 && res.data.data) {
          this.courseDetail = res.data.data
          if (!this.courseDetail.instruction.myCollectedCode) {
            this.flag = true
          } else {
            this.flag = false
          }
        }
      })
    },
    // 获取小节详情
    getCourseDetail1(chapterCode) {
      const data = {
        chapterCode: chapterCode
      }
      learnTest.Course.chapterDetail(data).then(res => {
        if (res.data.status === 0 && res.data.data) {
          this.videoUrl = this.$config.ImageURl + res.data.data.subjectContent
          this.videoShow = true
          console.log(this.videoUrl)
        }
      })
    },
    clickCell(o, item) {
      this.videoUrl = ''
      this.videoShow = false
      this.courseSave(o.chapterCode, item.chapterCatalogueCode)
      this.contentsave(o.chapterCode, item.chapterCatalogueCode, this.courseDetail.instruction.myCourseCode)
      if (o.chapterType === '1') {
        this.$router.push({
          name: 'learnTest-course-graphicDetail',
          params: { chapterCode: o.chapterCode }
        })
      } else if (o.chapterType === '2') {
        this.getCourseDetail1(o.chapterCode)
      }
    },
    // 清空
    onClear() {
      this.message = ''
    },
    // 提交
    onSubmit() {
      const data = {
        feedback: this.message,
        code: this.$route.query.code
      }
      learnTest.Course.feedback(data).then(res => {
        if (res.data.status === 0) {
          if (this.message) {
            this.$toast.success('提交成功')
          } else {
            this.$toast.fail('请填写课程反馈')
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/learnTest/course/introduction.less';
</style>
